<!doctype html>
<html>
  <head>
    <title>PGlite COPY Example</title>
    <link rel="stylesheet" href="./styles.css" />
    <script src="./utils.js"></script>
    <script type="importmap">
      {
        "imports": {
          "@electric-sql/pglite": "../dist/index.js"
        }
      }
    </script>
  </head>
  <body>
    <h1>PGlite <code>COPY</code> Example</h1>
    <div class="script-plus-log">
      <script type="module">
        import { PGlite } from '@electric-sql/pglite'

        const pg = new PGlite()

        await pg.exec(`
  CREATE TABLE IF NOT EXISTS test (
    id SERIAL PRIMARY KEY,
    name TEXT
  );
`)

        // add 1000 rows:
        await pg.exec(
          "INSERT INTO test (name) SELECT 'name' || i FROM generate_series(1, 1000) i;",
        )

        // Copy the date to a file:
        console.log('Copying data to file...') // 'test.csv
        const ret = await pg.query(
          "COPY test TO '/dev/blob' WITH (FORMAT binary);",
        )

        console.log('Data copied to blob:')
        const blob = ret.blob
        console.log(blob)

        // Download the file:
        const a = document.createElement('a')
        a.href = URL.createObjectURL(
          new File([blob], 'test.csv', { type: 'text/csv' }),
        )
        a.download = 'test.csv'
        a.click()

        // Other table
        await pg.exec(`
  CREATE TABLE IF NOT EXISTS test2 (
    id SERIAL PRIMARY KEY,
    name TEXT
  );
`)

        // import the data from the file:
        console.log('Importing data from file...')
        const ret2 = await pg.query(
          "COPY test2 FROM '/dev/blob' WITH (FORMAT binary);",
          [],
          {
            blob: blob,
          },
        )

        console.log('Data imported from file:')
        const ret3 = await pg.query('SELECT * FROM test2;', [])
        console.log(ret3.rows)
      </script>
      <div id="log"></div>
    </div>
  </body>
</html>
